<template>
  <div class="barInfo">
    <div class="barInfoWrap">
      <div id="barChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      newStudentId: "",
      duringClassInfo: [],
      chartInstance: null,
    };
  },
  props: ["studentId"],
  watch: {
    studentId: {
      immediate: true, // 立即触发一次
      handler(newValue) {
        if (newValue) {
          this.getDuringClassInfoById(newValue);
        }
      },
    },
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
      this.chartInstance = null;
    }
  },
  methods: {
    dataChart() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
      }
      
      var chartDom = document.getElementById("barChart");
      this.chartInstance = echarts.init(chartDom);
      var option;
      this.chartInstance.setOption(
        (option = {
          color: [
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#00f2ff" },
              { offset: 1, color: "#007aff" },
            ]),
          ],
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0, 50, 100, 0.8)",
            borderColor: "#00cfff",
            textStyle: {
              color: "#ffffff",
            },
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "20%",
            top: "15%",
            containLabel: true,
            backgroundColor: 'rgba(0, 20, 40, 0.1)',
            borderColor: 'rgba(0, 234, 255, 0.2)',
            borderWidth: 1,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0, 234, 255, 0.1)',
                type: 'dashed'
              }
            }
          },
          xAxis: [
            {
              type: "category",
              data: this.duringClassInfo.map((item) => item.mission_type),
              axisLabel: {
                color: "#ffffff",
                interval: 0,
                rotate: 30,
                margin: 15,
                fontSize: 12
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(0, 234, 255, 0.3)'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(0, 234, 255, 0.1)',
                  type: 'dashed'
                }
              }
            },
          ],
          yAxis: [
            {
              type: "value",
              nameLocation: "middle",
              nameGap: 30,
              nameTextStyle: {
                fontWeight: "bold",
                fontSize: "14",
                color: "#ffffff",
              },
              axisLabel: {
                color: "#ffffff",
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(0, 234, 255, 0.3)'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(0, 234, 255, 0.1)',
                  type: 'dashed'
                }
              }
            },
          ],
          dataZoom: [
            {
              type: "inside",
              zoomOnMouseWheel: true,
              moveOnMouseMove: true,
              preventDefaultMouseMove: false
            }
          ],
          series: [
            {
              name: "平均成绩",
              type: "bar",
              data: this.duringClassInfo.map((item) => item.average_score),
              barWidth: 12,
              itemStyle: {
                borderRadius: [6, 6, 0, 0],
                shadowColor: 'rgba(0, 234, 255, 0.6)',
                shadowBlur: 10,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#00f2ff' },
                  { offset: 0.5, color: '#007aff' },
                  { offset: 1, color: '#001f3f' }
                ])
              },
              emphasis: {
                itemStyle: {
                  borderColor: '#00eaff',
                  borderWidth: 2,
                  shadowColor: 'rgba(0, 255, 255, 0.8)',
                  shadowBlur: 20
                }
              },
              markPoint: {
                data: [
                  { 
                    type: "max", 
                    name: "最大值",
                    symbol: 'pin',
                    symbolSize: 40,
                    itemStyle: {
                      color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                        { offset: 0, color: '#00f2ff' },
                        { offset: 1, color: '#007aff' }
                      ]),
                      shadowColor: 'rgba(0, 234, 255, 0.8)',
                      shadowBlur: 10
                    },
                    label: {
                      color: '#fff',
                      fontSize: 12,
                      fontWeight: 'bold',
                      formatter: function(params) {
                        return params.data.value;
                      }
                    }
                  },
                  { 
                    type: "min", 
                    name: "最小值",
                    symbol: 'pin',
                    symbolSize: 40,
                    itemStyle: {
                      color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                        { offset: 0, color: '#00f2ff' },
                        { offset: 1, color: '#007aff' }
                      ]),
                      shadowColor: 'rgba(0, 234, 255, 0.8)',
                      shadowBlur: 10
                    },
                    label: {
                      color: '#fff',
                      fontSize: 12,
                      fontWeight: 'bold',
                      formatter: function(params) {
                        return params.data.value;
                      }
                    }
                  }
                ]
              },
            },
          ],
        })
      );

      option && this.chartInstance.setOption(option);
    },
    getDuringClassInfoById(id) {
      this.$axios
        .get("/students/getDuringClassInfoById/" + id, {})
        .then((res) => {
            this.duringClassInfo = [...res.data.data]
            .map((item) => ({
              ...item,
              mission_type: "任务" + (Number(item.mission_type)),
            }))
            .sort((a, b) => {
              return (
                Number(a.mission_type.replace("任务", "")) -
                Number(b.mission_type.replace("任务", ""))
              );
            });
          this.dataChart();
        });
    },
  },
};
</script>
<style scoped>
.barInfoWrap {
  display: flex;
  justify-content: center;
  flex-direction: row;
  background-color: rgba(255, 255, 255, 0);
  margin-top: -5%;
  width: 100%;
  height: 100%;
  padding-bottom: 1%;
  box-sizing: border-box;
}

#barChart {
  width: 100%;
  height: 100%;
  margin-top: 5%;
}

.barInfo {
  width: 100%;
  height: 100%;
}
</style>